<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" v-model="keywork" placeholder="请输入名字">
        <ul>
            <li v-for="(p,index) in persionDatas" :key="p.id">{{p.name}} -{{p.age}} - {{index}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#root",
            data() {
                return {
                    keywork: "",
                    persons: [{
                            id: '001',
                            name: '张三',
                            age: 18
                        },
                        {
                            id: '002',
                            name: '牛蛋',
                            age: 19
                        },
                        {
                            id: '003',
                            name: '李狗蛋',
                            age: 20
                        }, {
                            id: '004',
                            name: '王八蛋',
                            age: 20
                        }
                    ],
                    persionDatas:[]
                }
            },
            watch: {
                keywork:{
                    immediate:true,
                    handler(val){
                        this.persionDatas = this.persons.filter(p=>p.name.indexOf(val)!==-1);
                    }
                }
            },
            //计算属性实现
            // computed: {
            //     persionDatas(){
            //         return this.persons.filter(p=>p.name.indexOf(this.keywork)!==-1);
            //     }
            // },
        })
    </script>
</body>

</html>